<!--
 * @Author: Bennent_G
 * @Date: 2024-12-26 14:46:50
 * @LastEditTime: 2025-03-27 19:49:31
 * @Description:
-->
<template>
	<el-card class="mb-16">
		<el-collapse v-model="activeKey" class="page-header-container">
			<el-collapse-item name="1">
				<template #title>
					搜索
					<el-icon class="header-icon">
						<Search />
					</el-icon>
				</template>
				<el-form inline :model="searchForm">
					<el-form-item label="昵称">
						<el-input v-model="searchForm.nickName" placeholder="请输入" />
					</el-form-item>
					<el-form-item label="手机号">
						<el-input v-model="searchForm.mobile" placeholder="请输入" />
					</el-form-item>
					<el-form-item label="性别">
						<el-select v-model="searchForm.sex" placeholder="请选择性别">
							<el-option value="">全部</el-option>
							<el-option value="1">男</el-option>
							<el-option value="0">女</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="状态">
						<el-select v-model="searchForm.sex" placeholder="请选择">
							<el-option value="">全部</el-option>
							<el-option value="1">正常</el-option>
							<el-option value="0">禁用</el-option>
						</el-select>
					</el-form-item>
					<el-space :size="16">
						<el-button size="small">重置</el-button>
						<el-button type="primary" size="small">搜索</el-button>
					</el-space>
				</el-form>
			</el-collapse-item>
		</el-collapse>
	</el-card>
	<!--  -->
	<el-card>
		<template #header>
			<el-space>
				<el-button type="primary" size="small" @click="openModal('add')">创建用户</el-button>
			</el-space>
		</template>
		<el-table :data="data" border>
			<el-table-column prop="id" label="ID" align="center" />
			<el-table-column label="头像" align="center">
				<template #default="scope">
					<el-avatar :src="scope.row.avatar" size="small" />
				</template>
			</el-table-column>
			<el-table-column prop="nickName" label="昵称" align="center" />
			<el-table-column prop="mobile" label="手机号" align="center" />
			<el-table-column prop="sex" label="性别" align="center">
				<template #default="scope">
					<el-tag v-if="scope.row.sex === 1" type="primary" size="small">男</el-tag>
					<el-tag v-else type="danger" size="small">女</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="注册时间" align="center" width="180" />
			<el-table-column label="状态" align="center">
				<template #default="scope">
					<el-tag v-if="scope.row.status === '1'" type="primary" size="small">正常</el-tag>
					<el-tag v-else type="danger" size="small">禁用</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" fixed="right" width="140">
				<template #default="scope">
					<el-button text size="small" @click="openModal('edit', scope.row.id)">编辑</el-button>
					<el-button type="danger" size="small" text
						@click="handleDelete(scope.row, scope.$index)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</el-card>
	<!--  -->
	<DeptUserModal v-model="visible" :id="currentUserId" :title="title" />
</template>

<script setup lang="ts">
import { ref, createVNode, watch } from 'vue';
import useNotificationHook from "@/hooks/common/useNotificationHook";
import type { AnyObject } from "@/views/global";
import { fetchUsers } from '@/apis/admin/user';
import DeptUserModal from "@/components/admin/systems/dept/DeptUserModal.vue";

interface User {
	id: number;
	avatar: string;
	nickName: string;
	sex: number;
	mobile: string;
	createTime: string;
	status: string;
}

const props = defineProps({
	deptId: {
		type: [Number, String],
		default: 0
	}
});

const data = ref<User[]>([]);
const loading = ref<boolean>(false);
const getUserList = () => {
	fetchUsers<User[]>({}).then(res => {
		loading.value = false;
		data.value = res.data;
	});
};
watch(
	() => props.deptId,
	(newValue, oldValue) => {
		if (newValue && newValue !== oldValue) {
			loading.value = true;
			getUserList();
		}
	}
);

// search
const activeKey = ref<string[]>(['1']);
const searchForm = ref<AnyObject>({
	nickName: '',
	sex: '',
	status: '',
	mobile: ''
});

// 通知
const { openNotifation } = useNotificationHook();

// 状态切换
// const handleStatus = (checked: string | number, record: AnyObject) => {
// 	Modal.confirm({
// 		title: "提示",
// 		icon: createVNode(ExclamationCircleOutlined),
// 		content: `确认${checked === '1' ? '启用' : '禁用'}用户吗？`,
// 		okText: '确认',
// 		cancelText: '取消',
// 		onOk() {
// 			//  #TODO: API调用
// 			record.status = checked.toString();
// 		},
// 		onCancel() {
// 			record.status = !checked.toString();
// 		},
// 	});
// };

// 删除
const handleDelete = (record: AnyObject) => {
	console.log(record);
	// #TODO:  API调用
	openNotifation({
		type: 'success',
		message: '删除成功',
	});
};

const visible = ref<boolean>(false);
const title = ref<string>('');
const currentUserId = ref<number | string>(0);
const openModal = (type: string, id?: number | string | undefined) => {
	title.value = type === 'add' ? '新增用户' : '编辑用户';
	currentUserId.value = id || 0;
	visible.value = true;
};

</script>

<style scoped lang="scss">
@use '@/assets/style/mixin' as mixin;
@include mixin.reset-el-collapse;
@include mixin.reset-el-card;

.page-header-container {
	.el-form-item {
		width: 240px;
		margin-bottom: 16px;
	}
}
</style>
